<template>
	<view class="shopping_mail_main" @touchstart="onTouchStart" @touchmove="onTouchMove">
		<view class="swiper_bg">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper autoplay="true" interval="3000" duration="1000" @change="change" class="swiperitem_image"
					circular="true">
					<swiper-item v-for="(item ,index) in info" :key="index" @click="toGoodDetail(item)">
						<image :src="item.swiperImage" mode="aspectFill" class="swiperitem_image"></image>
						<view class="swiper_title_scription_price">
							<view class="swiper_scription">
								{{item.description}}
							</view>
							<view class="swiper_title">
								{{item.swiperTitle}}
							</view>
							<view class="swiper_goods_price">
								¥{{item.price}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="logo_search_cart" :style="{ backgroundColor: bgColor }">
			<view class="logo_jy_search_shopping_cart">
				<view class="logo-search-left">
					<view class="jy_logo_view">
						<image :src="jyLogo" mode="aspectFit"></image>
					</view>
					<view class="input-view-top">
						<!-- 搜索框 -->
						<uni-easyinput class="search-input" :styles="easyInputStyles" suffixIcon="search" trim="both"
							:placeholder="placeholderText" @focus="toSearchPage"
							@iconClick="toSearchPage"></uni-easyinput>
					</view>
				</view>

				<view class="search_shopping_Cart">

					<!-- <uni-icons type="search" size="25" class="search_icon" color="#000000"
						@click="toSearchPage"></uni-icons> -->

					<view class="cart_icon_and_tip" @click="toCartPage">
						<uni-badge class="uni-badge-left-margin" :text="cartGoodsNum" absolute="rightTop" size="small">
							<uni-icons type="cart-filled" size="25" color="#fff"></uni-icons>
						</uni-badge>
					</view>

					<!-- 三个点（点击弹出客服和我的订单） -->
					<view class="dot_view" @click="openPopup">
						<uni-icons type="more-filled" size="22" color="#fff"></uni-icons>
					</view>

					<uni-popup ref="popup" background-color="#fff" type="right">
						<view class="pop-menu">
							<view class="kefu-view" @click="toChatPage">
								客服
							</view>
							<view class="my-order" @click="toMyOrderPage">
								我的订单
							</view>
						</view>
					</uni-popup>
				</view>
			</view>
			<!-- 商城顶部导航 -->
			<ShoppingTopBar @currentSelectType="getSelectType"></ShoppingTopBar>
		</view>
		<component :is="currentComponent"></component>
	</view>
</template>
<script>
	import ShoppingRecommendPage from '@/pages/tabBar/extUI/shopping_topBar/shoppingRecommendPage.vue';
	import Outside from '@/pages/tabBar/extUI/shopping_topBar/outside.vue';
	import LivePage from '@/pages/tabBar/extUI/shopping_topBar/livePage.vue';
	import TripPage from '@/pages/tabBar/extUI/shopping_topBar/tripPage.vue'
	import ShoppingTopBar from '@/components/shoppingTopBar.vue';
	import {
		getGoodsIndexPageSwiperApi
	} from '@/request/goods.js';
	import {
		checkIsLogin
	} from '@/common/util';
	export default {
		name: 'ShoppingIndex',
		components: {
			ShoppingRecommendPage,
			Outside,
			LivePage,
			TripPage,
			ShoppingTopBar
		},
		onShow() {
			// 判断是否登录，如果没有登录直接跳转登录页面
			checkIsLogin();
		},

		data() {
			return {
				easyInputStyles: {
					borderRadius: '10rpx' // 添加这行代码，设置边框圆角
				},
				jyLogo: '../../../static/image/JneyTo.png',
				placeholderText: '搜索商品',
				cartGoodsNum: 0, // 购物车商品数量
				currentComponent: 'ShoppingRecommendPage',
				info: [{
						swiperId: 1,
						swiperTitle: '210W桌面充电站',
						description: '大功率多接口，多设备供电无忧',
						price: 799,
						swiperImage: 'https://img2.baidu.com/it/u=68069927,4249261148&fm=253&fmt=auto&app=120&f=JPEG?w=1094&h=729'
					},
					{
						swiperId: 2,
						swiperTitle: '舒适折叠椅',
						description: '保证质量，绝对优品',
						price: 78,
						swiperImage: 'https://img1.baidu.com/it/u=3267035920,1244232736&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083'
					},
					{
						swiperId: 3,
						swiperTitle: '登顶山峰',
						description: '功能齐全，配套完善',
						price: 2000,
						swiperImage: 'https://img1.baidu.com/it/u=1094477793,3029795033&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083'
					}
				],
				current: 0,
				mode: 'default',
				startY: 0,
				currentY: 0,
				bgColor: 'rgba(255, 255, 255, 0)',
			};
		},

		onLoad() {
			// 获取轮播图和购物车数量
			this.getGoodsIndexPageSwiper();
		},

		methods: {

			onTouchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			onTouchMove(e) {
				this.currentY = e.touches[0].pageY;
				// const diff = this.currentY - this.startY;
				const diff = this.startY - this.currentY;
				// console.log(diff);
				// 计算颜色的透明度，这里假设最大滑动距离为 10，可根据实际情况调整
				const opacity = Math.min(diff / 20, 1);
				this.bgColor = `rgba(255, 255, 255, ${opacity})`;
			},

			// 获取轮播图和购物车数量
			getGoodsIndexPageSwiper() {
				// console.log("轮播加载");
				getGoodsIndexPageSwiperApi().then(res => {
					// console.log(res);
					this.cartGoodsNum = res.data.data.cartGoodsNum
					this.info = res.data.data.goodsIndexPageSwipers
					this.placeholderText = this.info[0].swiperTitle
				})
			},

			change(e) {
				this.current = e.detail.current;
			},
			// 顶部导航栏获取当前选择的类型
			getSelectType(id) {
				if (id === 1) {
					this.currentComponent = 'ShoppingRecommendPage';
				} else if (id === 2) {
					this.currentComponent = 'Outside';
				} else if (id === 3) {
					this.currentComponent = 'LivePage';
				} else {
					this.currentComponent = 'TripPage';
				}
			},
			// 去搜索页面
			toSearchPage() {
				uni.navigateTo({
					url: '/pages/tabBar/extUI/shopping_topBar/shoppingSearchPage'
				})
			},
			// 去购物车页面
			toCartPage() {
				uni.navigateTo({
					url: '/pages/tabBar/extUI/shopping_topBar/cartPage'
				})
			},
			// 点击轮播图，去详情页面
			toGoodDetail(item) {
				const goodAid = item.goodAid;
				// console.log(item);
				uni.navigateTo({
					url: `/pages/tabBar/extUI/shopping_topBar/goodDetail?goodAid=${goodAid}`,
				})
			},

			openPopup() {
				this.$refs.popup.open()
			},
			
			toChatPage() {
				uni.navigateTo({
					url: `/pages/friendsChat/chatPage/chatRoomPage`,
				})
			},

			toMyOrderPage() {
				// uni.navigateTo({
				// 	url: `/pages/order/myOrderPage`,
				// })
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.logo_search_cart {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 250rpx;
		z-index: 100;
	}

	.swiperitem_image {
		width: 100%;
		height: 60vh;
	}

	.swiper_bg {
		width: 100%;
	}

	.swiper_title_scription_price {
		color: #ffffff;
		padding-left: 30px;
		position: absolute;
		bottom: 40px;
	}

	.swiper_scription {
		font-size: 20px;
		margin-bottom: 8px;
		letter-spacing: 1px;
	}

	.swiper_title {
		font-size: 22px;
		font-weight: bold;
		letter-spacing: 1px;
	}

	.swiper_goods_price {
		letter-spacing: 1px;
	}

	.logo_image {
		width: 140px;
		height: 60px;
	}

	.search_shopping_Cart {
		width: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 70px;
		align-items: center;
		// background-color: #aaffff;
	}

	.logo_jy_search_shopping_cart {
		width: 95%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;

		.logo-search-left {
			display: flex;
			flex-direction: row;
			align-items: center;

			.jy_logo_view {
				image {
					width: 120px;
					height: 40px;
				}
			}
		}

		.input-view-top {
			width: 300rpx;

			uni-easyinput {
				border: 1rpx solid rgba(170, 170, 255, 0.8);
			}

			// .search-input{
			// 	width: 200rpx;
			// }
		}
	}

	.search_icon {
		margin-right: 10px;
	}

	.pop-menu {
		position: absolute;
		right: 0;
		top: 150rpx;
		width: 200rpx;
		height: 200rpx;
		background-color: #fff;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
</style>